<template>
	<div id="add">
		<input type="text" v-model="name" placeholder="姓名" /><br />
		<input type="number" v-model.number="age" placeholder="年龄" /><br />
		<textarea v-model="sign" placeholder="个性签名"></textarea><br />
		<button @click="addAction()">新增</button>
		<button @click="cancelAction()">取消</button>
	</div>
</template>

<script>
export default {
	name: "add-com",
	data(){
		return {
			name: "",
			age: "",
			sign: ""
		}
	},
	methods:{
		//添加
		addAction(){
			if(this.name&&this.age&&this.sign){
				this.center.$emit("addtolist",{
					name: this.name,
					age: this.age,
					sign: this.sign
				})
				this.cancelAction()
			}
		},
		//取消
		cancelAction(){
			this.name = "";
			this.age = "";
			this.sign = "";
		}
	}
}
</script>

<style>
#add{
	border: 2px solid #009688;
}
</style>